import React ,{Component}from 'react';
import { BackTop } from 'antd';
import Home from '../views/home/home';
import Solution from '../views/solution/solution';
import Products from '../views/products/products';
import Caseshow from '../views/caseshow/caseshow';
import Citygroup from '../views/citygroup/citygroup';
import News from '../views/news/news';
import About from '../views/about/about';
import Newsdetail from '../views/newsdetail/newsdetail';
import Err from '../views/err/err';
import Foot from '../components/foot/foot';
import {Route,Switch,Redirect} from "react-router-dom";
import Nav from '../components/nav/nav';
import RouterStyled from './routerstyled.js';
class RouterView extends Component {
    constructor(props){
        super(props);
        this.state={
            showhead:false,
            color:true

        }
    }
    componentDidMount(){
        window.addEventListener('scroll', ()=>{
            if(document.documentElement.scrollTop>50){
                this.navStyled();
            }else if(document.documentElement.scrollTop<50){
                this.navStyledchange();
            }
        })
    }
        
    shownav(e){
        e.stopPropagation();//阻止事件冒泡
        this.setState({
            showhead:!this.state.showhead
        })
    }
    nonenav=()=>{
        this.setState({
            showhead:false
        })
    }
    navStyled=()=>{
        this.setState({
            color:false
         })
    }
    navStyledchange=()=>{
        this.setState({
            color:true
         })
    }
    render(){
        return (
            <div onClick={this.nonenav}>
                <RouterStyled>
                    <div className="header" style={{opacity:this.state.color?0.3:0.7 }}>
                       <img className="logo" src="home/logo.png" alt="logo"/> 
                       <img onClick={(e)=>this.shownav(e)} className="menu" src="home/menu.png" alt="menu"/>
                    </div>
                        {this.state.showhead===true && <Nav/>}
                    <div>
                        <Switch>
                            <Route path="/home" component={Home}/>
                            <Route path="/solution" component={Solution}/>
                            <Route path="/products" component={Products}/>
                            <Route path="/caseshow" component={Caseshow}/>
                            <Route path="/citygroup" component={Citygroup}/>
                            <Route path="/news" component={News}/>
                            <Route path="/about" component={About}/>
                            <Route path="/newsdetail/:id" component={Newsdetail}/>
                            {/* exact精准匹配 */}
                            {/* <Route path="/" component={Home}/> */}
                            {/* 设置重定向,exact精准匹配 */}
                            <Redirect from="/" to="/home" exact/> 
                            {/* 404页面 当用户把路径修改错误的时候跳转的页面 */}
                            <Route component={Err}/> 
                        </Switch>
                    </div>
                    {/* 返回顶部 */}
                    <div className="backtop">
                            <BackTop/>
                    </div>
                    <footer>
                        <Foot></Foot>
                    </footer>
                    
                </RouterStyled>
            </div>
        )
    }
    
}
export default RouterView;